<!-- build time:Sun Nov 24 2019 22:25:17 GMT+0800 (China Standard Time) --><!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><title>Vue-Router简明教程(基础) - Note?Note!</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="description" content="Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由&#x2F;视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为"><meta name="keywords" content="Vue,JavaScript,vue-router"><meta property="og:type" content="article"><meta property="og:title" content="Vue-Router简明教程(基础)"><meta property="og:url" content="http:&#x2F;&#x2F;www.borgor.cn&#x2F;2019-06-14&#x2F;9ff3f948.html"><meta property="og:site_name" content="Note?Note!"><meta property="og:description" content="Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由&#x2F;视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为"><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https:&#x2F;&#x2F;imgs.borgor.cn&#x2F;imgs20190625083237.png"><meta property="og:updated_time" content="2019-11-19T05:53:13.392Z"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https:&#x2F;&#x2F;imgs.borgor.cn&#x2F;imgs20190625083237.png"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/font-awesome/5.4.1/css/all.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.8/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.css"><link rel="stylesheet" href="/css/back-to-top.css"><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="//hm.baidu.com/hm.js?6cecff6d18ae0c22fd7ac294c80fe7c0";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><link rel="stylesheet" href="/css/progressbar.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><link rel="stylesheet" href="/css/style.css"></head><body class="is-2-column"><nav class="navbar navbar-main"><div class="container"><div class="navbar-brand is-flex-center"><a class="navbar-item navbar-logo" href="/"><img src="https://imgs.borgor.cn/imgs20190625111723.jpg" alt="Vue-Router简明教程(基础)" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="/">首页</a> <a class="navbar-item" href="/archives">归档</a> <a class="navbar-item" href="/categories">分类</a> <a class="navbar-item" href="/tags">标签</a> <a class="navbar-item" href="/readinglist">书单</a></div><div class="navbar-end"><a class="navbar-item search" title="搜索" href="javascript:;" target="_blank" rel="noopener"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column is-8-tablet is-9-desktop is-9-widescreen has-order-2 column-main"><div class="card"><div class="card-image"><span class="image is-7by1"><img class="thumbnail" src="https://imgs.borgor.cn/imgs20190625083237.png" alt="Vue-Router简明教程(基础)"></span></div><div class="card-content article"><div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto"><div class="level-left"><div class="level-item"><a href="https://router.vuejs.org/zh/" target="_blank">转载于</a></div><time class="level-item has-text-grey" datetime="2019-06-14T13:55:43.000Z">2019-06-14</time><div class="level-item"><a class="has-link-grey -link" href="/categories/Development/">Development</a>&nbsp;/&nbsp;<a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></div><span class="level-item has-text-grey">37 分钟 读完 (大约 5485 个字) </span><span class="level-item has-text-grey" id="busuanzi_container_page_pv"><i class="far fa-eye"></i> <span id="busuanzi_value_page_pv">0</span>次访问</span></div></div><h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">Vue-Router简明教程(基础)</h1><div class="content"><p>Vue Router 是 <a href="http://cn.vuejs.org/" target="_blank" rel="noopener">Vue.js</a> 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p><ul><li>嵌套的路由/视图表</li><li>模块化的、基于组件的路由配置</li><li>路由参数、查询、通配符</li><li>基于 Vue.js 过渡系统的视图过渡效果</li><li>细粒度的导航控制</li><li>带有自动激活的 CSS class 的链接</li><li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li><li>自定义的滚动条行为</li></ul><a id="more"></a><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><h3 id="直接下载-cdn"><a href="#直接下载-cdn" class="headerlink" title="直接下载-cdn"></a>直接下载-cdn</h3><p><a href="https://unpkg.com/vue-router/dist/vue-router.js" target="_blank" rel="noopener">https://unpkg.com/vue-router/dist/vue-router.js</a></p><p><a href="https://unpkg.com/" target="_blank" rel="noopener">Unpkg.com</a> 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 <code>https://unpkg.com/vue-router@2.0.0/dist/vue-router.js</code> 这样指定 版本号 或者 Tag。</p><p>在 Vue 后面加载 <code>vue-router</code>，它会自动安装的：</p><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/vue.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/vue-router.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="NPM"><a href="#NPM" class="headerlink" title="NPM"></a>NPM</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-router</span><br></pre></td></tr></table></figure><p>如果在一个模块化工程中使用它，必须要通过 <code>Vue.use()</code> 明确地安装路由功能：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span></span><br><span class="line"><span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span></span><br><span class="line"></span><br><span class="line">Vue.use(VueRouter)</span><br></pre></td></tr></table></figure><p>如果使用全局的 script 标签，则无须如此 (手动安装)。</p><h3 id="构建开发版"><a href="#构建开发版" class="headerlink" title="构建开发版"></a>构建开发版</h3><p>如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 <code>vue-router</code>。</p><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git <span class="hljs-built_in">clone</span> https://github.com/vuejs/vue-router.git node_modules/vue-router</span><br><span class="line"><span class="hljs-built_in">cd</span> node_modules/vue-router</span><br><span class="line">npm install</span><br><span class="line">npm run build</span><br></pre></td></tr></table></figure><h1 id="起步"><a href="#起步" class="headerlink" title="起步"></a>起步</h1><p>注意</p><p>教程中的案例代码将使用 <a href="https://github.com/lukehoban/es6features" target="_blank" rel="noopener">ES2015</a> 来编写。</p><p>同时，所有的例子都将使用完整版的 Vue 以解析模板。更多细节请<a href="https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时" target="_blank" rel="noopener">移步这里</a>。</p><p>用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子：</p><h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue/dist/vue.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue-router/dist/vue-router.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello App!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span></span><br><span class="line">    <span class="hljs-comment">&lt;!-- 使用 router-link 组件来导航. --&gt;</span></span><br><span class="line">    <span class="hljs-comment">&lt;!-- 通过传入 `to` 属性指定链接. --&gt;</span></span><br><span class="line">    <span class="hljs-comment">&lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&lt;a&gt;` 标签 --&gt;</span></span><br><span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/foo"</span>&gt;</span>Go to Foo<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/bar"</span>&gt;</span>Go to Bar<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="line">  <span class="hljs-comment">&lt;!-- 路由出口 --&gt;</span></span><br><span class="line">  <span class="hljs-comment">&lt;!-- 路由匹配到的组件将渲染在这里 --&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h2><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)</span></span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 1. 定义 (路由) 组件。</span></span><br><span class="line"><span class="hljs-comment">// 可以从其他文件 import 进来</span></span><br><span class="line"><span class="hljs-keyword">const</span> Foo = &#123; <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;foo&lt;/div&gt;'</span> &#125;</span><br><span class="line"><span class="hljs-keyword">const</span> Bar = &#123; <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;bar&lt;/div&gt;'</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 2. 定义路由</span></span><br><span class="line"><span class="hljs-comment">// 每个路由应该映射一个组件。 其中"component" 可以是</span></span><br><span class="line"><span class="hljs-comment">// 通过 Vue.extend() 创建的组件构造器，</span></span><br><span class="line"><span class="hljs-comment">// 或者，只是一个组件配置对象。</span></span><br><span class="line"><span class="hljs-comment">// 我们晚点再讨论嵌套路由。</span></span><br><span class="line"><span class="hljs-keyword">const</span> routes = [</span><br><span class="line">  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/foo'</span>, <span class="hljs-attr">component</span>: Foo &#125;,</span><br><span class="line">  &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/bar'</span>, <span class="hljs-attr">component</span>: Bar &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 3. 创建 router 实例，然后传 `routes` 配置</span></span><br><span class="line"><span class="hljs-comment">// 你还可以传别的配置参数, 不过先这么简单着吧。</span></span><br><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes <span class="hljs-comment">// (缩写) 相当于 routes: routes</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 4. 创建和挂载根实例。</span></span><br><span class="line"><span class="hljs-comment">// 记得要通过 router 配置参数注入路由，</span></span><br><span class="line"><span class="hljs-comment">// 从而让整个应用都有路由功能</span></span><br><span class="line"><span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="line">  router</span><br><span class="line">&#125;).$mount(<span class="hljs-string">'#app'</span>)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 现在，应用已经启动了！</span></span><br></pre></td></tr></table></figure><p>通过注入路由器，我们可以在任何组件内通过 <code>this.$router</code> 访问路由器，也可以通过 <code>this.$route</code>访问当前路由：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// Home.vue</span></span><br><span class="line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span><br><span class="line">  computed: &#123;</span><br><span class="line">    username () &#123;</span><br><span class="line">      <span class="hljs-comment">// 我们很快就会看到 `params` 是什么</span></span><br><span class="line">      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.$route.params.username</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    goBack () &#123;</span><br><span class="line">      <span class="hljs-built_in">window</span>.history.length &gt; <span class="hljs-number">1</span></span><br><span class="line">        ? <span class="hljs-keyword">this</span>.$router.go(<span class="hljs-number">-1</span>)</span><br><span class="line">        : <span class="hljs-keyword">this</span>.$router.push(<span class="hljs-string">'/'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>该文档通篇都常使用 <code>router</code> 实例。留意一下 <code>this.$router</code> 和 <code>router</code> 使用起来完全一样。我们使用 <code>this.$router</code> 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。</p><p>你可以看看这个<a href="https://jsfiddle.net/yyx990803/xgrjzsup/" target="_blank" rel="noopener">在线的</a>例子。</p><p>要注意，当 <code>&lt;router-link&gt;</code> 对应的路由匹配成功，将自动设置 class 属性值 <code>.router-link-active</code>。查看 <a href="https://router.vuejs.org/zh/api/#router-link" target="_blank" rel="noopener">API 文档</a> 学习更多相关内容。</p><h1 id="动态路由匹配"><a href="#动态路由匹配" class="headerlink" title="动态路由匹配"></a>动态路由匹配</h1><p>我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 <code>User</code> 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 <code>vue-router</code> 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  template: <span class="hljs-string">'&lt;div&gt;User&lt;/div&gt;'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    <span class="hljs-comment">// 动态路径参数 以冒号开头</span></span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/user/:id'</span>, <span class="hljs-attr">component</span>: User &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>现在呢，像 <code>/user/foo</code> 和 <code>/user/bar</code> 都将映射到相同的路由。</p><p>一个“路径参数”使用冒号 <code>:</code> 标记。当匹配到一个路由时，参数值会被设置到 <code>this.$route.params</code>，可以在每个组件内使用。于是，我们可以更新 <code>User</code> 的模板，输出当前用户的 ID：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  template: <span class="hljs-string">'&lt;div&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/div&gt;'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>你可以看看这个<a href="https://jsfiddle.net/yyx990803/4xfa2f19/" target="_blank" rel="noopener">在线例子</a>。</p><p>你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 <code>$route.params</code> 中。例如：</p><table><thead><tr><th>模式</th><th>匹配路径</th><th>$route.params</th></tr></thead><tbody><tr><td>/user/:username</td><td>/user/evan</td><td><code>{ username: &#39;evan&#39; }</code></td></tr><tr><td>/user/:username/post/:post_id</td><td>/user/evan/post/123</td><td><code>{ username: &#39;evan&#39;, post_id: &#39;123&#39; }</code></td></tr></tbody></table><p>除了 <code>$route.params</code> 外，<code>$route</code> 对象还提供了其它有用的信息，例如，<code>$route.query</code> (如果 URL 中有查询参数)、<code>$route.hash</code> 等等。你可以查看 <a href="https://router.vuejs.org/zh/api/#路由对象" target="_blank" rel="noopener">API 文档</a> 的详细说明。</p><h2 id="响应路由参数的变化"><a href="#响应路由参数的变化" class="headerlink" title="响应路由参数的变化"></a>响应路由参数的变化</h2><p>提醒一下，当使用路由参数时，例如从 <code>/user/foo</code> 导航到 <code>/user/bar</code>，<strong>原来的组件实例会被复用</strong>。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会再被调用</strong>。</p><p>复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) <code>$route</code> 对象：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  template: <span class="hljs-string">'...'</span>,</span><br><span class="line">  watch: &#123;</span><br><span class="line">    <span class="hljs-string">'$route'</span> (to, <span class="hljs-keyword">from</span>) &#123;</span><br><span class="line">      <span class="hljs-comment">// 对路由变化作出响应...</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>或者使用 2.2 中引入的 <code>beforeRouteUpdate</code> <a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" target="_blank" rel="noopener">导航守卫</a>：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  template: <span class="hljs-string">'...'</span>,</span><br><span class="line">  beforeRouteUpdate (to, <span class="hljs-keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="hljs-comment">// react to route changes...</span></span><br><span class="line">    <span class="hljs-comment">// don't forget to call next()</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="捕获所有路由或-404-Not-found-路由"><a href="#捕获所有路由或-404-Not-found-路由" class="headerlink" title="捕获所有路由或 404 Not found 路由"></a>捕获所有路由或 404 Not found 路由</h2><p>常规参数只会匹配被 <code>/</code> 分隔的 URL 片段中的字符。如果想匹配<strong>任意路径</strong>，我们可以使用通配符 (<code>*</code>)：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="hljs-comment">// 会匹配所有路径</span></span><br><span class="line">  path: <span class="hljs-string">'*'</span></span><br><span class="line">&#125;</span><br><span class="line">&#123;</span><br><span class="line">  <span class="hljs-comment">// 会匹配以 `/user-` 开头的任意路径</span></span><br><span class="line">  path: <span class="hljs-string">'/user-*'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>当使用<em>通配符</em>路由时，请确保路由的顺序是正确的，也就是说含有<em>通配符</em>的路由应该放在最后。路由 <code>{ path: &#39;*&#39; }</code> 通常用于客户端 404 错误。如果你使用了<em>History 模式</em>，请确保<a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html" target="_blank" rel="noopener">正确配置你的服务器</a>。</p><p>当使用一个<em>通配符</em>时，<code>$route.params</code> 内会自动添加一个名为 <code>pathMatch</code> 参数。它包含了 URL 通过<em>通配符</em>被匹配的部分：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 给出一个路由 &#123; path: '/user-*' &#125;</span></span><br><span class="line"><span class="hljs-keyword">this</span>.$router.push(<span class="hljs-string">'/user-admin'</span>)</span><br><span class="line"><span class="hljs-keyword">this</span>.$route.params.pathMatch <span class="hljs-comment">// 'admin'</span></span><br><span class="line"><span class="hljs-comment">// 给出一个路由 &#123; path: '*' &#125;</span></span><br><span class="line"><span class="hljs-keyword">this</span>.$router.push(<span class="hljs-string">'/non-existing'</span>)</span><br><span class="line"><span class="hljs-keyword">this</span>.$route.params.pathMatch <span class="hljs-comment">// '/non-existing'</span></span><br></pre></td></tr></table></figure><h2 id="高级匹配模式"><a href="#高级匹配模式" class="headerlink" title="高级匹配模式"></a>高级匹配模式</h2><p><code>vue-router</code> 使用 <a href="https://github.com/pillarjs/path-to-regexp" target="_blank" rel="noopener">path-to-regexp</a> 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 <a href="https://github.com/pillarjs/path-to-regexp#parameters" target="_blank" rel="noopener">文档</a> 学习高阶的路径匹配，还有 <a href="https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js" target="_blank" rel="noopener">这个例子 </a>展示 <code>vue-router</code> 怎么使用这类匹配。</p><h2 id="匹配优先级"><a href="#匹配优先级" class="headerlink" title="匹配优先级"></a>匹配优先级</h2><p>有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。</p><h1 id="嵌套路由"><a href="#嵌套路由" class="headerlink" title="嵌套路由"></a>嵌套路由</h1><p>实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：</p><figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">/user/foo/profile                     /user/foo/posts</span><br><span class="line">+------------------+                  +-----------------+</span><br><span class="line">| User             |                  | User            |</span><br><span class="line">| +--------------+ |                  | +-------------+ |</span><br><span class="line">| | Profile      | |  +------------&gt;  | | Posts       | |</span><br><span class="line">| |              | |                  | |             | |</span><br><span class="line">| +--------------+ |                  | +-------------+ |</span><br><span class="line">+------------------+                  +-----------------+</span><br></pre></td></tr></table></figure><p>借助 <code>vue-router</code>，使用嵌套路由配置，就可以很简单地表达这种关系。</p><p>接着上节创建的 app：</p><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="line">const User = &#123;</span><br><span class="line">  template: '<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>User &#123;&#123; $route.params.id &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>'</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const router = new VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; path: '/user/:id', component: User &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>这里的 <code>&lt;router-view&gt;</code> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <code>&lt;router-view&gt;</code>。例如，在 <code>User</code> 组件的模板添加一个 <code>&lt;router-view&gt;</code>：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  template: <span class="hljs-string">`</span></span><br><span class="line"><span class="hljs-string">    &lt;div class="user"&gt;</span></span><br><span class="line"><span class="hljs-string">      &lt;h2&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/h2&gt;</span></span><br><span class="line"><span class="hljs-string">      &lt;router-view&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="hljs-string">    &lt;/div&gt;</span></span><br><span class="line"><span class="hljs-string">  `</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>要在嵌套的出口中渲染组件，需要在 <code>VueRouter</code> 的参数中使用 <code>children</code> 配置：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/user/:id'</span>, <span class="hljs-attr">component</span>: User,</span><br><span class="line">      children: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="hljs-comment">// 当 /user/:id/profile 匹配成功，</span></span><br><span class="line">          <span class="hljs-comment">// UserProfile 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          path: <span class="hljs-string">'profile'</span>,</span><br><span class="line">          component: UserProfile</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="hljs-comment">// 当 /user/:id/posts 匹配成功</span></span><br><span class="line">          <span class="hljs-comment">// UserPosts 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          path: <span class="hljs-string">'posts'</span>,</span><br><span class="line">          component: UserPosts</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><strong>要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。</strong></p><p>你会发现，<code>children</code> 配置就是像 <code>routes</code> 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。</p><p>此时，基于上面的配置，当你访问 <code>/user/foo</code> 时，<code>User</code> 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="hljs-string">'/user/:id'</span>, <span class="hljs-attr">component</span>: User,</span><br><span class="line">      children: [</span><br><span class="line">        <span class="hljs-comment">// 当 /user/:id 匹配成功，</span></span><br><span class="line">        <span class="hljs-comment">// UserHome 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">        &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">component</span>: UserHome &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="hljs-comment">// ...其他子路由</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h1 id="编程式的导航"><a href="#编程式的导航" class="headerlink" title="编程式的导航"></a>编程式的导航</h1><p>除了使用 <code>&lt;router-link&gt;</code> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。</p><h2 id="router-push-location-onComplete-onAbort"><a href="#router-push-location-onComplete-onAbort" class="headerlink" title="router.push(location, onComplete?, onAbort?)"></a><code>router.push(location, onComplete?, onAbort?)</code></h2><p><strong>注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。</strong></p><p>想要导航到不同的 URL，则使用 <code>router.push</code> 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。</p><p>当你点击 <code>&lt;router-link&gt;</code> 时，这个方法会在内部调用，所以说，点击 <code>&lt;router-link :to=&quot;...&quot;&gt;</code> 等同于调用 <code>router.push(...)</code>。</p><table><thead><tr><th>声明式</th><th>编程式</th></tr></thead><tbody><tr><td><code>&lt;router-link :to=&quot;...&quot;&gt;</code></td><td><code>router.push(...)</code></td></tr></tbody></table><p>该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 字符串</span></span><br><span class="line">router.push(<span class="hljs-string">'home'</span>)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 对象</span></span><br><span class="line">router.push(&#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'home'</span> &#125;)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 命名的路由</span></span><br><span class="line">router.push(&#123; <span class="hljs-attr">name</span>: <span class="hljs-string">'user'</span>, <span class="hljs-attr">params</span>: &#123; <span class="hljs-attr">userId</span>: <span class="hljs-string">'123'</span> &#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 带查询参数，变成 /register?plan=private</span></span><br><span class="line">router.push(&#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'register'</span>, <span class="hljs-attr">query</span>: &#123; <span class="hljs-attr">plan</span>: <span class="hljs-string">'private'</span> &#125;&#125;)</span><br></pre></td></tr></table></figure><p><strong>注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：</strong></p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> userId = <span class="hljs-string">'123'</span></span><br><span class="line">router.push(&#123; <span class="hljs-attr">name</span>: <span class="hljs-string">'user'</span>, <span class="hljs-attr">params</span>: &#123; userId &#125;&#125;) <span class="hljs-comment">// -&gt; /user/123</span></span><br><span class="line">router.push(&#123; <span class="hljs-attr">path</span>: <span class="hljs-string">`/user/<span class="hljs-subst">$&#123;userId&#125;</span>`</span> &#125;) <span class="hljs-comment">// -&gt; /user/123</span></span><br><span class="line"><span class="hljs-comment">// 这里的 params 不生效</span></span><br><span class="line">router.push(&#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/user'</span>, <span class="hljs-attr">params</span>: &#123; userId &#125;&#125;) <span class="hljs-comment">// -&gt; /user</span></span><br></pre></td></tr></table></figure><p>同样的规则也适用于 <code>router-link</code> 组件的 <code>to</code> 属性。</p><p>在 2.2.0+，可选的在 <code>router.push</code> 或 <code>router.replace</code> 中提供 <code>onComplete</code> 和 <code>onAbort</code> 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。</p><p><strong>注意</strong>： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 <code>/users/1</code> -&gt; <code>/users/2</code>)，你需要使用 <a href="https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化" target="_blank" rel="noopener"><code>beforeRouteUpdate</code></a> 来响应这个变化 (比如抓取用户信息)。</p><h2 id="router-replace-location-onComplete-onAbort"><a href="#router-replace-location-onComplete-onAbort" class="headerlink" title="router.replace(location, onComplete?, onAbort?)"></a><code>router.replace(location, onComplete?, onAbort?)</code></h2><p>跟 <code>router.push</code> 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。</p><table><thead><tr><th>声明式</th><th>编程式</th></tr></thead><tbody><tr><td><code>&lt;router-link :to=&quot;...&quot; replace&gt;</code></td><td><code>router.replace(...)</code></td></tr></tbody></table><h2 id="router-go-n"><a href="#router-go-n" class="headerlink" title="router.go(n)`"></a>router.go(n)`</h2><p>这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 <code>window.history.go(n)</code>。</p><p>例子</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// 在浏览器记录中前进一步，等同于 history.forward()</span></span><br><span class="line">router.go(<span class="hljs-number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 后退一步记录，等同于 history.back()</span></span><br><span class="line">router.go(<span class="hljs-number">-1</span>)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 前进 3 步记录</span></span><br><span class="line">router.go(<span class="hljs-number">3</span>)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 如果 history 记录不够用，那就默默地失败呗</span></span><br><span class="line">router.go(<span class="hljs-number">-100</span>)</span><br><span class="line">router.go(<span class="hljs-number">100</span>)</span><br></pre></td></tr></table></figure><h2 id="操作-History"><a href="#操作-History" class="headerlink" title="操作 History"></a>操作 History</h2><p>你也许注意到 <code>router.push</code>、 <code>router.replace</code> 和 <code>router.go</code> 跟 <a href="https://developer.mozilla.org/en-US/docs/Web/API/History" target="_blank" rel="noopener"><code>window.history.pushState</code>、 <code>window.history.replaceState</code> 和 <code>window.history.go</code></a>好像， 实际上它们确实是效仿 <code>window.history</code> API 的。</p><p>因此，如果你已经熟悉 <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API" target="_blank" rel="noopener">Browser History APIs</a>，那么在 Vue Router 中操作 history 就是超级简单的。</p><p>还有值得提及的，Vue Router 的导航方法 (<code>push</code>、 <code>replace</code>、 <code>go</code>) 在各类路由模式 (<code>history</code>、 <code>hash</code> 和 <code>abstract</code>) 下表现一致。</p><h1 id="命名路由"><a href="#命名路由" class="headerlink" title="命名路由"></a>命名路由</h1><p>有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 <code>routes</code> 配置中给某个路由设置名称。</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="hljs-string">'/user/:userId'</span>,</span><br><span class="line">      name: <span class="hljs-string">'user'</span>,</span><br><span class="line">      component: User</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>要链接到一个命名路由，可以给 <code>router-link</code> 的 <code>to</code> 属性传一个对象：</p><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">"&#123; name: 'user', params: &#123; userId: 123 &#125;&#125;"</span>&gt;</span>User<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure><p>这跟代码调用 <code>router.push()</code> 是一回事：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">router.push(&#123; <span class="hljs-attr">name</span>: <span class="hljs-string">'user'</span>, <span class="hljs-attr">params</span>: &#123; <span class="hljs-attr">userId</span>: <span class="hljs-number">123</span> &#125;&#125;)</span><br></pre></td></tr></table></figure><p>这两种方式都会把路由导航到 <code>/user/123</code> 路径。</p><h1 id="命名视图"><a href="#命名视图" class="headerlink" title="命名视图"></a>命名视图</h1><p>有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 <code>sidebar</code> (侧导航) 和 <code>main</code> (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 <code>router-view</code> 没有设置名字，那么默认为 <code>default</code>。</p><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"view one"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"view two"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"a"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"view three"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"b"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br></pre></td></tr></table></figure><p>一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 <code>components</code> 配置 (带上 s)：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="hljs-string">'/'</span>,</span><br><span class="line">      components: &#123;</span><br><span class="line">        <span class="hljs-keyword">default</span>: Foo,</span><br><span class="line">        a: Bar,</span><br><span class="line">        b: Baz</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>以上案例相关的可运行代码请<a href="https://jsfiddle.net/posva/6du90epg/" target="_blank" rel="noopener">移步这里</a>。</p><h2 id="嵌套命名视图"><a href="#嵌套命名视图" class="headerlink" title="嵌套命名视图"></a>嵌套命名视图</h2><p>我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 <code>router-view</code> 组件。我们以一个设置面板为例：</p><figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">/settings/emails                                       /settings/profile</span><br><span class="line">+-----------------------------------+                  +------------------------------+</span><br><span class="line">| UserSettings                      |                  | UserSettings                 |</span><br><span class="line">| +-----+-------------------------+ |                  | +-----+--------------------+ |</span><br><span class="line">| | Nav | UserEmailsSubscriptions | |  +------------&gt;  | | Nav | UserProfile        | |</span><br><span class="line">| |     +-------------------------+ |                  | |     +--------------------+ |</span><br><span class="line">| |     |                         | |                  | |     | UserProfilePreview | |</span><br><span class="line">| +-----+-------------------------+ |                  | +-----+--------------------+ |</span><br><span class="line">+-----------------------------------+                  +------------------------------+</span><br></pre></td></tr></table></figure><ul><li><code>Nav</code> 只是一个常规组件。</li><li><code>UserSettings</code> 是一个视图组件。</li><li><code>UserEmailsSubscriptions</code>、<code>UserProfile</code>、<code>UserProfilePreview</code> 是嵌套的视图组件。</li></ul><p><strong>注意</strong>：<em>我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上</em></p><p><code>UserSettings</code> 组件的 <code>&lt;template&gt;</code> 部分应该是类似下面的这段代码：</p><figure class="highlight html hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">&lt;!-- UserSettings.vue --&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>User Settings<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">NavBar</span>/&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>/&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"helper"</span>/&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p><em>嵌套的视图组件在此已经被忽略了，但是你可以在这里找到完整的源代码</em></p><p>然后你可以用这个路由配置完成该布局：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path: <span class="hljs-string">'/settings'</span>,</span><br><span class="line">  <span class="hljs-comment">// 你也可以在顶级路由就配置命名视图</span></span><br><span class="line">  component: UserSettings,</span><br><span class="line">  children: [&#123;</span><br><span class="line">    path: <span class="hljs-string">'emails'</span>,</span><br><span class="line">    component: UserEmailsSubscriptions</span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    path: <span class="hljs-string">'profile'</span>,</span><br><span class="line">    components: &#123;</span><br><span class="line">      <span class="hljs-keyword">default</span>: UserProfile,</span><br><span class="line">      helper: UserProfilePreview</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>一个可以工作的示例的 demo 在<a href="https://jsfiddle.net/posva/22wgksa3/" target="_blank" rel="noopener">这里</a>。</p><h1 id="重定向和别名"><a href="#重定向和别名" class="headerlink" title="重定向和别名"></a>重定向和别名</h1><h2 id="重定向"><a href="#重定向" class="headerlink" title="重定向"></a>重定向</h2><p>重定向也是通过 <code>routes</code> 配置来完成，下面例子是从 <code>/a</code> 重定向到 <code>/b</code>：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>, <span class="hljs-attr">redirect</span>: <span class="hljs-string">'/b'</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>重定向的目标也可以是一个命名的路由：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>, <span class="hljs-attr">redirect</span>: &#123; <span class="hljs-attr">name</span>: <span class="hljs-string">'foo'</span> &#125;&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>甚至是一个方法，动态返回重定向目标：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>, <span class="hljs-attr">redirect</span>: <span class="hljs-function"><span class="hljs-params">to</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="hljs-comment">// 方法接收 目标路由 作为参数</span></span><br><span class="line">      <span class="hljs-comment">// return 重定向的 字符串路径/路径对象</span></span><br><span class="line">    &#125;&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>注意<a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" target="_blank" rel="noopener">导航守卫</a>并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 <code>/a</code> 路由添加一个 <code>beforeEach</code> 或 <code>beforeLeave</code> 守卫并不会有任何效果。</p><p>其它高级用法，请参考<a href="https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js" target="_blank" rel="noopener">例子</a>。</p><h2 id="别名"><a href="#别名" class="headerlink" title="别名"></a>别名</h2><p>“重定向”的意思是，当用户访问 <code>/a</code>时，URL 将会被替换成 <code>/b</code>，然后匹配路由为 <code>/b</code>，那么“别名”又是什么呢？</p><p><strong>/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。</strong></p><p>上面对应的路由配置为：</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>, <span class="hljs-attr">component</span>: A, <span class="hljs-attr">alias</span>: <span class="hljs-string">'/b'</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。</p><h1 id="路由组件传参"><a href="#路由组件传参" class="headerlink" title="路由组件传参"></a>路由组件传参</h1><p>在组件中使用 <code>$route</code> 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。</p><p>使用 <code>props</code> 将组件和路由解耦：</p><p><strong>取代与 $route 的耦合</strong></p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  template: <span class="hljs-string">'&lt;div&gt;User &#123;&#123; $route.params.id &#125;&#125;&lt;/div&gt;'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/user/:id'</span>, <span class="hljs-attr">component</span>: User &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><strong>通过 props 解耦</strong></p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> User = &#123;</span><br><span class="line">  props: [<span class="hljs-string">'id'</span>],</span><br><span class="line">  template: <span class="hljs-string">'&lt;div&gt;User &#123;&#123; id &#125;&#125;&lt;/div&gt;'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/user/:id'</span>, <span class="hljs-attr">component</span>: User, <span class="hljs-attr">props</span>: <span class="hljs-literal">true</span> &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="hljs-comment">// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：</span></span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="hljs-string">'/user/:id'</span>,</span><br><span class="line">      components: &#123; <span class="hljs-attr">default</span>: User, <span class="hljs-attr">sidebar</span>: Sidebar &#125;,</span><br><span class="line">      props: &#123; <span class="hljs-attr">default</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">sidebar</span>: <span class="hljs-literal">false</span> &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。</p><h2 id="布尔模式"><a href="#布尔模式" class="headerlink" title="布尔模式"></a>布尔模式</h2><p>如果 <code>props</code> 被设置为 <code>true</code>，<code>route.params</code> 将会被设置为组件属性。</p><h2 id="对象模式"><a href="#对象模式" class="headerlink" title="对象模式"></a>对象模式</h2><p>如果 <code>props</code> 是一个对象，它会被按原样设置为组件属性。当 <code>props</code> 是静态的时候有用。</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/promotion/from-newsletter'</span>, <span class="hljs-attr">component</span>: Promotion, <span class="hljs-attr">props</span>: &#123; <span class="hljs-attr">newsletterPopup</span>: <span class="hljs-literal">false</span> &#125; &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="函数模式"><a href="#函数模式" class="headerlink" title="函数模式"></a>函数模式</h2><p>你可以创建一个函数返回 <code>props</code>。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'/search'</span>, <span class="hljs-attr">component</span>: SearchUser, <span class="hljs-attr">props</span>: <span class="hljs-function">(<span class="hljs-params">route</span>) =&gt;</span> (&#123; <span class="hljs-attr">query</span>: route.query.q &#125;) &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>URL <code>/search?q=vue</code> 会将 <code>{query: &#39;vue&#39;}</code> 作为属性传递给 <code>SearchUser</code> 组件。</p><p>请尽可能保持 <code>props</code> 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 <code>props</code>，请使用包装组件，这样 Vue 才可以对状态变化做出反应。</p><h1 id="HTML5-History-模式"><a href="#HTML5-History-模式" class="headerlink" title="HTML5 History 模式"></a>HTML5 History 模式</h1><p><code>vue-router</code> 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。</p><p>如果不想要很丑的 hash，我们可以用路由的 <strong>history 模式</strong>，这种模式充分利用 <code>history.pushState</code> API 来完成 URL 跳转而无须重新加载页面。</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  mode: <span class="hljs-string">'history'</span>,</span><br><span class="line">  routes: [...]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>当你使用 history 模式时，URL 就像正常的 url，例如 <code>http://yoursite.com/user/id</code>，也好看！</p><p>不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 <code>http://oursite.com/user/id</code> 就会返回 404，这就不好看了。</p><p>所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 <code>index.html</code> 页面，这个页面就是你 app 依赖的页面。</p><h2 id="后端配置例子"><a href="#后端配置例子" class="headerlink" title="后端配置例子"></a>后端配置例子</h2><h4 id="Apache"><a href="#Apache" class="headerlink" title="Apache"></a>Apache</h4><figure class="highlight xml hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">IfModule</span> <span class="hljs-attr">mod_rewrite.c</span>&gt;</span></span><br><span class="line">  RewriteEngine On</span><br><span class="line">  RewriteBase /</span><br><span class="line">  RewriteRule ^index\.html$ - [L]</span><br><span class="line">  RewriteCond %&#123;REQUEST_FILENAME&#125; !-f</span><br><span class="line">  RewriteCond %&#123;REQUEST_FILENAME&#125; !-d</span><br><span class="line">  RewriteRule . /index.html [L]</span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">IfModule</span>&gt;</span></span><br></pre></td></tr></table></figure><p>除了 <code>mod_rewrite</code>，你也可以使用 <a href="https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource" target="_blank" rel="noopener"><code>FallbackResource</code></a>。</p><h4 id="nginx"><a href="#nginx" class="headerlink" title="nginx"></a>nginx</h4><figure class="highlight nginx hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-attribute">location</span> / &#123;</span><br><span class="line">  <span class="hljs-attribute">try_files</span> <span class="hljs-variable">$uri</span> <span class="hljs-variable">$uri</span>/ /index.html;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="原生-Node-js"><a href="#原生-Node-js" class="headerlink" title="原生 Node.js"></a>原生 Node.js</h4><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> http = <span class="hljs-built_in">require</span>(<span class="hljs-string">'http'</span>)</span><br><span class="line"><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>)</span><br><span class="line"><span class="hljs-keyword">const</span> httpPort = <span class="hljs-number">80</span></span><br><span class="line"></span><br><span class="line">http.createServer(<span class="hljs-function">(<span class="hljs-params">req, res</span>) =&gt;</span> &#123;</span><br><span class="line">  fs.readFile(<span class="hljs-string">'index.htm'</span>, <span class="hljs-string">'utf-8'</span>, (err, content) =&gt; &#123;</span><br><span class="line">    <span class="hljs-keyword">if</span> (err) &#123;</span><br><span class="line">      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'We cannot open "index.htm" file.'</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    res.writeHead(<span class="hljs-number">200</span>, &#123;</span><br><span class="line">      <span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'text/html; charset=utf-8'</span></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    res.end(content)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;).listen(httpPort, () =&gt; &#123;</span><br><span class="line">  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Server listening on: http://localhost:%s'</span>, httpPort)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h4 id="基于-Node-js-的-Express"><a href="#基于-Node-js-的-Express" class="headerlink" title="基于 Node.js 的 Express"></a>基于 Node.js 的 Express</h4><p>对于 Node.js/Express，请考虑使用 <a href="https://github.com/bripkens/connect-history-api-fallback" target="_blank" rel="noopener">connect-history-api-fallback 中间件</a>。</p><h4 id="Internet-Information-Services-IIS"><a href="#Internet-Information-Services-IIS" class="headerlink" title="Internet Information Services (IIS)"></a>Internet Information Services (IIS)</h4><ol><li>安装 <a href="https://www.iis.net/downloads/microsoft/url-rewrite" target="_blank" rel="noopener">IIS UrlRewrite</a></li><li>在你的网站根目录中创建一个 <code>web.config</code> 文件，内容如下：</li></ol><figure class="highlight xml hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-meta">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;<span class="hljs-name">configuration</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;<span class="hljs-name">system.webServer</span>&gt;</span></span><br><span class="line">    <span class="hljs-tag">&lt;<span class="hljs-name">rewrite</span>&gt;</span></span><br><span class="line">      <span class="hljs-tag">&lt;<span class="hljs-name">rules</span>&gt;</span></span><br><span class="line">        <span class="hljs-tag">&lt;<span class="hljs-name">rule</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"Handle History Mode and custom 404/500"</span> <span class="hljs-attr">stopProcessing</span>=<span class="hljs-string">"true"</span>&gt;</span></span><br><span class="line">          <span class="hljs-tag">&lt;<span class="hljs-name">match</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"(.*)"</span> /&gt;</span></span><br><span class="line">          <span class="hljs-tag">&lt;<span class="hljs-name">conditions</span> <span class="hljs-attr">logicalGrouping</span>=<span class="hljs-string">"MatchAll"</span>&gt;</span></span><br><span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">add</span> <span class="hljs-attr">input</span>=<span class="hljs-string">"&#123;REQUEST_FILENAME&#125;"</span> <span class="hljs-attr">matchType</span>=<span class="hljs-string">"IsFile"</span> <span class="hljs-attr">negate</span>=<span class="hljs-string">"true"</span> /&gt;</span></span><br><span class="line">            <span class="hljs-tag">&lt;<span class="hljs-name">add</span> <span class="hljs-attr">input</span>=<span class="hljs-string">"&#123;REQUEST_FILENAME&#125;"</span> <span class="hljs-attr">matchType</span>=<span class="hljs-string">"IsDirectory"</span> <span class="hljs-attr">negate</span>=<span class="hljs-string">"true"</span> /&gt;</span></span><br><span class="line">          <span class="hljs-tag">&lt;/<span class="hljs-name">conditions</span>&gt;</span></span><br><span class="line">          <span class="hljs-tag">&lt;<span class="hljs-name">action</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"Rewrite"</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/"</span> /&gt;</span></span><br><span class="line">        <span class="hljs-tag">&lt;/<span class="hljs-name">rule</span>&gt;</span></span><br><span class="line">      <span class="hljs-tag">&lt;/<span class="hljs-name">rules</span>&gt;</span></span><br><span class="line">    <span class="hljs-tag">&lt;/<span class="hljs-name">rewrite</span>&gt;</span></span><br><span class="line">  <span class="hljs-tag">&lt;/<span class="hljs-name">system.webServer</span>&gt;</span></span><br><span class="line"><span class="hljs-tag">&lt;/<span class="hljs-name">configuration</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="Caddy"><a href="#Caddy" class="headerlink" title="Caddy"></a>Caddy</h4><figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">rewrite &#123;</span><br><span class="line">    regexp .*</span><br><span class="line">    to &#123;path&#125; /</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="Firebase-主机"><a href="#Firebase-主机" class="headerlink" title="Firebase 主机"></a>Firebase 主机</h4><p>在你的 <code>firebase.json</code> 中加入：</p><figure class="highlight json hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="hljs-attr">"hosting"</span>: &#123;</span><br><span class="line">    <span class="hljs-attr">"public"</span>: <span class="hljs-string">"dist"</span>,</span><br><span class="line">    <span class="hljs-attr">"rewrites"</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="hljs-attr">"source"</span>: <span class="hljs-string">"**"</span>,</span><br><span class="line">        <span class="hljs-attr">"destination"</span>: <span class="hljs-string">"/index.html"</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="警告"><a href="#警告" class="headerlink" title="警告"></a>警告</h2><p>给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 <code>index.html</code> 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。</p><figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="line">  mode: <span class="hljs-string">'history'</span>,</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="hljs-attr">path</span>: <span class="hljs-string">'*'</span>, <span class="hljs-attr">component</span>: NotFoundComponent &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅 <a href="https://ssr.vuejs.org/zh/" target="_blank" rel="noopener">Vue 服务端渲染文档</a>。</p><div><h1>推荐文章<span style="font-size:.45em;color:gray">（由<a href="https://github.com/huiwang/hexo-recommended-posts" target="_blank" rel="noopener">hexo文章推荐插件</a>驱动）</span></h1><ul><li><a href="http://www.borgor.cn/2019-07-25/789de642.html">在Vue-Router中使用跳转动画</a></li><li><a href="http://www.borgor.cn/2019-06-25/cbd6d728.html">使用vue+v-chart制作一个漂亮的饼状图</a></li><li><a href="http://www.borgor.cn/2019-06-14/92f6ccbc.html">Vue-SSR(Server-Side-Renderer)服务器端渲染指南</a></li></ul></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css"></div><div class="level is-size-7 is-uppercase"><div class="level-start"><div class="level-item"><span class="is-size-6 has-text-grey has-mr-7">#</span> <a class="has-link-grey -link" href="/tags/JavaScript/" rel="tag">JavaScript</a>, <a class="has-link-grey -link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="has-link-grey -link" href="/tags/vue-router/" rel="tag">vue-router</a></div></div></div></div></div><div class="card"><div class="card-content"><h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3><div class="buttons is-centered"><a class="button is-info donate"><span class="icon is-small"><i class="fab fa-alipay"></i> </span><span>支付宝</span><div class="qrcode"><img src="https://imgs.borgor.cn/imgs20190628231540.png" alt="支付宝"></div></a><a class="button is-success donate"><span class="icon is-small"><i class="fab fa-weixin"></i> </span><span>微信</span><div class="qrcode"><img src="https://imgs.borgor.cn/imgs20190628231554.png" alt="微信"></div></a></div></div></div><div class="card card-transparent"><div class="level post-navigation is-flex-wrap is-mobile"><div class="level-start"><a class="level level-item has-link-grey article-nav-prev" href="/2019-06-14/87b1b6b1.html"><i class="level-item fas fa-chevron-left"></i> <span class="level-item">Babel简介</span></a></div><div class="level-end"><a class="level level-item has-link-grey article-nav-next" href="/2019-06-14/4750a353.html"><span class="level-item">Vue-Router简明教程(进阶)</span> <i class="level-item fas fa-chevron-right"></i></a></div></div></div><div class="card"><div class="card-content"><h3 class="title is-5 has-text-weight-normal">评论</h3><div id="valine-thread" class="content"></div><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script>new Valine({el:"#valine-thread",notify:!1,verify:!1,app_id:"ybhyfHG9S4TQhIvstdj5pprw-gzGzoHsz",app_key:"ob8A13IBceQXqd8g92nUgNMx",placeholder:"你有想说的么？"})</script></div></div></div><div class="column is-4-tablet is-3-desktop is-3-widescreen has-order-1 column-left"><div class="card widget"><div class="card-content"><nav class="level"><div class="level-item has-text-centered"><div><figure class="image is-128x128 has-mb-6"><img class="is-rounded" src="https://imgs.borgor.cn/imgs20190625111723.jpg" alt="BorGor"></figure><p class="is-size-4 is-block">BorGor</p><p class="is-size-6 is-block">Note?Note!</p><p class="is-size-6 is-flex is-flex-center has-text-grey"><i class="fas fa-map-marker-alt has-mr-7"></i> <span>Lanzhou.Gansu</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><p class="title has-text-weight-normal">86</p></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><p class="title has-text-weight-normal">26</p></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><p class="title has-text-weight-normal">153</p></div></div></nav><div class="level"><a class="level-item button is-link is-rounded" href="/" target="_blank">关注我</a></div><div class="level is-mobile"><a class="level-item button is-white is-marginless" target="_blank" title="Github" href="https://github.com/cyrusky"><i class="fab fa-github"></i></a></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-marginless" href="/categories/AI/"><span class="level-start"><span class="level-item">AI</span> </span><span class="level-end"><span class="level-item tag">20</span></span></a><ul><li><a class="level is-marginless" href="/categories/AI/Machine-Learning/"><span class="level-start"><span class="level-item">Machine Learning</span> </span><span class="level-end"><span class="level-item tag">6</span></span></a></li><li><a class="level is-marginless" href="/categories/AI/Mathematics/"><span class="level-start"><span class="level-item">Mathematics</span> </span><span class="level-end"><span class="level-item tag">9</span></span></a></li><li><a class="level is-marginless" href="/categories/AI/NLP/"><span class="level-start"><span class="level-item">NLP</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/AI/%E5%85%AC%E5%BC%8F%E6%8E%A8%E5%AF%BC/"><span class="level-start"><span class="level-item">公式推导</span> </span><span class="level-end"><span class="level-item tag">4</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/CheatSheets/"><span class="level-start"><span class="level-item">CheatSheets</span> </span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/"><span class="level-start"><span class="level-item">DevOps</span> </span><span class="level-end"><span class="level-item tag">8</span></span></a><ul><li><a class="level is-marginless" href="/categories/DevOps/Anti-patterns/"><span class="level-start"><span class="level-item">Anti-patterns</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/Concept/"><span class="level-start"><span class="level-item">Concept</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/Continuous-Delivery/"><span class="level-start"><span class="level-item">Continuous Delivery</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/TeamWorks/"><span class="level-start"><span class="level-item">TeamWorks</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/DevOps/Testing/"><span class="level-start"><span class="level-item">Testing</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/Development/"><span class="level-start"><span class="level-item">Development</span> </span><span class="level-end"><span class="level-item tag">33</span></span></a><ul><li><a class="level is-marginless" href="/categories/Development/Integrated/"><span class="level-start"><span class="level-item">Integrated</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/JavaScript/"><span class="level-start"><span class="level-item">JavaScript</span> </span><span class="level-end"><span class="level-item tag">18</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/Native/"><span class="level-start"><span class="level-item">Native</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/Python/"><span class="level-start"><span class="level-item">Python</span> </span><span class="level-end"><span class="level-item tag">9</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/React/"><span class="level-start"><span class="level-item">React</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/Development/html5/"><span class="level-start"><span class="level-item">html5</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/Operations/"><span class="level-start"><span class="level-item">Operations</span> </span><span class="level-end"><span class="level-item tag">18</span></span></a><ul><li><a class="level is-marginless" href="/categories/Operations/Nginx/"><span class="level-start"><span class="level-item">Nginx</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-marginless" href="/categories/Operations/OpenStack/"><span class="level-start"><span class="level-item">OpenStack</span> </span><span class="level-end"><span class="level-item tag">14</span></span></a></li><li><a class="level is-marginless" href="/categories/Operations/System/"><span class="level-start"><span class="level-item">System</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li></ul></li><li><a class="level is-marginless" href="/categories/Reading-Writing/"><span class="level-start"><span class="level-item">Reading&Writing</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a><ul><li><a class="level is-marginless" href="/categories/Reading-Writing/Hexo/"><span class="level-start"><span class="level-item">Hexo</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/categories/Reading-Writing/LaTeX/"><span class="level-start"><span class="level-item">LaTeX</span> </span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li></ul></div></div></div><div class="card widget"><div class="card-content"><h3 class="menu-label">标签云</h3><a href="/tags/Agile/" style="font-size:10px">Agile</a> <a href="/tags/Angularjs/" style="font-size:11.11px">Angularjs</a> <a href="/tags/Animation/" style="font-size:10px">Animation</a> <a href="/tags/Application/" style="font-size:10px">Application</a> <a href="/tags/Artificial-Intelligence/" style="font-size:10px">Artificial Intelligence</a> <a href="/tags/BP/" style="font-size:10px">BP</a> <a href="/tags/Bokeh/" style="font-size:10px">Bokeh</a> <a href="/tags/Book/" style="font-size:10px">Book</a> <a href="/tags/C4-5/" style="font-size:10px">C4.5</a> <a href="/tags/CART/" style="font-size:10px">CART</a> <a href="/tags/CD/" style="font-size:10px">CD</a> <a href="/tags/CLI/" style="font-size:10px">CLI</a> <a href="/tags/CSS/" style="font-size:10px">CSS</a> <a href="/tags/CentOS/" style="font-size:11.11px">CentOS</a> <a href="/tags/Cinder/" style="font-size:10px">Cinder</a> <a href="/tags/Clipboardjs/" style="font-size:10px">Clipboardjs</a> <a href="/tags/Concept/" style="font-size:10px">Concept</a> <a href="/tags/Continuous-Delivery/" style="font-size:10px">Continuous Delivery</a> <a href="/tags/DeepLearning/" style="font-size:16.67px">DeepLearning</a> <a href="/tags/Department/" style="font-size:11.11px">Department</a> <a href="/tags/DevOps/" style="font-size:17.78px">DevOps</a> <a href="/tags/Develop/" style="font-size:13.33px">Develop</a> <a href="/tags/Development/" style="font-size:20px">Development</a> <a href="/tags/Directive/" style="font-size:10px">Directive</a> <a href="/tags/Distribution/" style="font-size:10px">Distribution</a> <a href="/tags/Django/" style="font-size:12.22px">Django</a> <a href="/tags/Document/" style="font-size:10px">Document</a> <a href="/tags/ES5/" style="font-size:10px">ES5</a> <a href="/tags/ES6/" style="font-size:10px">ES6</a> <a href="/tags/Echarts/" style="font-size:10px">Echarts</a> <a href="/tags/Engine/" style="font-size:10px">Engine</a> <a href="/tags/Entropy/" style="font-size:10px">Entropy</a> <a href="/tags/Filter/" style="font-size:10px">Filter</a> <a href="/tags/Front-End/" style="font-size:10px">Front End</a> <a href="/tags/Gallery/" style="font-size:10px">Gallery</a> <a href="/tags/Git/" style="font-size:10px">Git</a> <a href="/tags/Gradient-descent/" style="font-size:10px">Gradient descent</a> <a href="/tags/Hexo/" style="font-size:12.22px">Hexo</a> <a href="/tags/Horizon/" style="font-size:10px">Horizon</a> <a href="/tags/ID3-5/" style="font-size:10px">ID3.5</a> <a href="/tags/Icarus/" style="font-size:10px">Icarus</a> <a href="/tags/JavaScript/" style="font-size:18.89px">JavaScript</a> <a href="/tags/Javascript/" style="font-size:11.11px">Javascript</a> <a href="/tags/KVM/" style="font-size:10px">KVM</a> <a href="/tags/LaTeX/" style="font-size:10px">LaTeX</a> <a href="/tags/LibreOffice/" style="font-size:10px">LibreOffice</a> <a href="/tags/Linux/" style="font-size:10px">Linux</a> <a href="/tags/Machine-Learning/" style="font-size:11.11px">Machine Learning</a> <a href="/tags/Matrix/" style="font-size:10px">Matrix</a> <a href="/tags/MiddleWare/" style="font-size:10px">MiddleWare</a> <a href="/tags/Module/" style="font-size:10px">Module</a> <a href="/tags/Network/" style="font-size:10px">Network</a> <a href="/tags/Nginx/" style="font-size:10px">Nginx</a> <a href="/tags/NodeJS/" style="font-size:11.11px">NodeJS</a> <a href="/tags/OOP/" style="font-size:10px">OOP</a> <a href="/tags/OpenStack/" style="font-size:17.78px">OpenStack</a> <a href="/tags/OpenStackApi/" style="font-size:14.44px">OpenStackApi</a> <a href="/tags/Operations/" style="font-size:10px">Operations</a> <a href="/tags/Oprations/" style="font-size:11.11px">Oprations</a> <a href="/tags/PDF/" style="font-size:10px">PDF</a> <a href="/tags/Pipline/" style="font-size:10px">Pipline</a> <a href="/tags/Probability/" style="font-size:12.22px">Probability</a> <a href="/tags/Python/" style="font-size:15.56px">Python</a> <a href="/tags/React/" style="font-size:11.11px">React</a> <a href="/tags/Relational-algebra/" style="font-size:10px">Relational algebra</a> <a href="/tags/Restful/" style="font-size:10px">Restful</a> <a href="/tags/Route/" style="font-size:10px">Route</a> <a href="/tags/SVD/" style="font-size:10px">SVD</a> <a href="/tags/SVM/" style="font-size:11.11px">SVM</a> <a href="/tags/Scalar/" style="font-size:10px">Scalar</a> <a href="/tags/Sigmoid/" style="font-size:10px">Sigmoid</a> <a href="/tags/Team/" style="font-size:10px">Team</a> <a href="/tags/Tempest/" style="font-size:10px">Tempest</a> <a href="/tags/Tensor/" style="font-size:10px">Tensor</a> <a href="/tags/Testing/" style="font-size:10px">Testing</a> <a href="/tags/Time/" style="font-size:10px">Time</a> <a href="/tags/TimeMachine/" style="font-size:10px">TimeMachine</a> <a href="/tags/Tips/" style="font-size:10px">Tips</a> <a href="/tags/Vector/" style="font-size:10px">Vector</a> <a href="/tags/Vmware/" style="font-size:10px">Vmware</a> <a href="/tags/Vue/" style="font-size:17.78px">Vue</a> <a href="/tags/Vuex/" style="font-size:10px">Vuex</a> <a href="/tags/WSGI/" style="font-size:10px">WSGI</a> <a href="/tags/Web/" style="font-size:10px">Web</a> <a href="/tags/Word-Cut/" style="font-size:10px">Word Cut</a> <a href="/tags/aliyun/" style="font-size:10px">aliyun</a> <a href="/tags/auth/" style="font-size:10px">auth</a> <a href="/tags/babel/" style="font-size:10px">babel</a> <a href="/tags/certbot/" style="font-size:10px">certbot</a> <a href="/tags/decision-tree/" style="font-size:10px">decision tree</a> <a href="/tags/homebrew/" style="font-size:10px">homebrew</a> <a href="/tags/jwt/" style="font-size:10px">jwt</a> <a href="/tags/keystone/" style="font-size:11.11px">keystone</a> <a href="/tags/loader/" style="font-size:10px">loader</a> <a href="/tags/mathematics/" style="font-size:11.11px">mathematics</a> <a href="/tags/migrate/" style="font-size:10px">migrate</a> <a href="/tags/openstack/" style="font-size:10px">openstack</a> <a href="/tags/pdf2html/" style="font-size:10px">pdf2html</a> <a href="/tags/pm2/" style="font-size:10px">pm2</a> <a href="/tags/singular-value-decomposition/" style="font-size:10px">singular value decomposition</a> <a href="/tags/vue-router/" style="font-size:11.11px">vue-router</a> <a href="/tags/vue-ssr/" style="font-size:10px">vue-ssr</a> <a href="/tags/webpack/" style="font-size:10px">webpack</a> <a href="/tags/%E4%BD%8E%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/" style="font-size:10px">低通滤波器</a> <a href="/tags/%E5%85%A5%E9%97%A8/" style="font-size:10px">入门</a> <a href="/tags/%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F/" style="font-size:10px">全局变量</a> <a href="/tags/%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1/" style="font-size:10px">全局对象</a> <a href="/tags/%E5%85%A8%E6%A0%88/" style="font-size:10px">全栈</a> <a href="/tags/%E5%85%AC%E5%BC%8F/" style="font-size:12.22px">公式</a> <a href="/tags/%E5%86%B3%E7%AD%96%E6%A0%91/" style="font-size:10px">决策树</a> <a href="/tags/%E5%87%BD%E6%95%B0/" style="font-size:10px">函数</a> <a href="/tags/%E5%88%86%E7%B1%BB%E5%99%A8/" style="font-size:10px">分类器</a> <a href="/tags/%E5%8A%A0%E9%80%9F/" style="font-size:10px">加速</a> <a href="/tags/%E5%8C%B9%E9%85%8D%E6%BB%A4%E6%B3%A2%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">匹配滤波边缘检测</a> <a href="/tags/%E5%8D%B7%E7%A7%AF/" style="font-size:10px">卷积</a> <a href="/tags/%E5%8D%B7%E7%A7%AF%E6%A0%B8/" style="font-size:10px">卷积核</a> <a href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/" style="font-size:10px">原型链</a> <a href="/tags/%E5%8F%8D%E5%90%91%E4%BC%A0%E6%92%AD/" style="font-size:10px">反向传播</a> <a href="/tags/%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B/" style="font-size:10px">变量类型</a> <a href="/tags/%E5%AE%98%E6%96%B9%E7%A4%BA%E4%BE%8B/" style="font-size:10px">官方示例</a> <a href="/tags/%E5%AF%B9%E5%81%B6%E5%BD%A2%E5%BC%8F/" style="font-size:10px">对偶形式</a> <a href="/tags/%E5%AF%B9%E8%B1%A1/" style="font-size:10px">对象</a> <a href="/tags/%E5%B9%B3%E7%A7%BB%E5%92%8C%E6%9F%A5%E5%88%86%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">平移和查分边缘检测</a> <a href="/tags/%E6%8B%89%E6%A0%BC%E6%9C%97%E6%97%A5%E4%B9%98%E5%AD%90%E6%B3%95/" style="font-size:10px">拉格朗日乘子法</a> <a href="/tags/%E6%8E%A8%E5%AF%BC/" style="font-size:12.22px">推导</a> <a href="/tags/%E6%8F%90%E4%BA%A4%E9%98%B6%E6%AE%B5/" style="font-size:10px">提交阶段</a> <a href="/tags/%E6%9C%80%E5%A4%A7%E4%BC%BC%E7%84%B6%E4%BC%B0%E8%AE%A1/" style="font-size:10px">最大似然估计</a> <a href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E4%BC%B0%E8%AE%A1/" style="font-size:10px">最小二乘估计</a> <a href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E6%B3%95/" style="font-size:10px">最小二乘法</a> <a href="/tags/%E6%9C%B4%E7%B4%A0%E8%B4%9D%E5%8F%B6%E6%96%AF/" style="font-size:10px">朴素贝叶斯</a> <a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" style="font-size:10px">机器学习</a> <a href="/tags/%E6%9D%A1%E4%BB%B6%E6%A6%82%E7%8E%87/" style="font-size:10px">条件概率</a> <a href="/tags/%E6%A2%AF%E5%BA%A6%E4%B8%8B%E9%99%8D/" style="font-size:11.11px">梯度下降</a> <a href="/tags/%E6%A2%AF%E5%BA%A6%E6%96%B9%E5%90%91%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">梯度方向边缘检测</a> <a href="/tags/%E6%A6%82%E5%BF%B5/" style="font-size:10px">概念</a> <a href="/tags/%E6%A6%82%E7%8E%87/" style="font-size:10px">概率</a> <a href="/tags/%E6%B1%82%E5%AF%BC/" style="font-size:10px">求导</a> <a href="/tags/%E6%B5%81%E7%A8%8B/" style="font-size:10px">流程</a> <a href="/tags/%E7%86%B5/" style="font-size:10px">熵</a> <a href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" style="font-size:10px">生命周期</a> <a href="/tags/%E7%9F%A9%E9%98%B5/" style="font-size:10px">矩阵</a> <a href="/tags/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/" style="font-size:10px">神经网络</a> <a href="/tags/%E7%A7%81%E6%9C%89%E5%AF%B9%E8%B1%A1/" style="font-size:10px">私有对象</a> <a href="/tags/%E7%B1%BB/" style="font-size:10px">类</a> <a href="/tags/%E7%BA%BF%E6%80%A7%E5%9B%9E%E5%BD%92/" style="font-size:10px">线性回归</a> <a href="/tags/%E8%81%94%E5%90%88%E6%A6%82%E7%8E%87/" style="font-size:10px">联合概率</a> <a href="/tags/%E8%B4%9D%E5%8F%B6%E6%96%AF%E5%88%A4%E5%AE%9A%E5%87%86%E5%88%99/" style="font-size:10px">贝叶斯判定准则</a> <a href="/tags/%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/" style="font-size:10px">边缘检测</a> <a href="/tags/%E8%BE%B9%E9%99%85%E6%A6%82%E7%8E%87/" style="font-size:10px">边际概率</a> <a href="/tags/%E9%97%AD%E5%8C%85/" style="font-size:10px">闭包</a> <a href="/tags/%E9%97%B4%E9%9A%94/" style="font-size:11.11px">间隔</a> <a href="/tags/%E9%AB%98%E6%96%AF%E5%88%86%E5%B8%83/" style="font-size:10px">高斯分布</a> <a href="/tags/%E9%AB%98%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/" style="font-size:10px">高通滤波器</a></div></div><div class="column-right-shadow"><div class="card widget"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><a href="/2019-11-24/4adcf99c.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191124220507.png" alt="JavaScript闭包到底解决了什么问题？"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-24T12:42:13.000Z">2019-11-24</time></div><a href="/2019-11-24/4adcf99c.html" class="has-link-black-ter is-size-6">JavaScript闭包到底解决了什么问题？</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article><article class="media"><a href="/2019-11-22/f971e187.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191122161153.png" alt="JavaScript中对象的生命周期"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-22T06:04:32.000Z">2019-11-22</time></div><a href="/2019-11-22/f971e187.html" class="has-link-black-ter is-size-6">JavaScript中对象的生命周期</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article><article class="media"><a href="/2019-11-21/c07cc943.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191121175758.png" alt="React官方示例中的小游戏示例"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-21T09:56:03.000Z">2019-11-21</time></div><a href="/2019-11-21/c07cc943.html" class="has-link-black-ter is-size-6">React官方示例中的小游戏示例</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/React/">React</a></p></div></div></article><article class="media"><a href="/2019-11-21/769edcc6.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191121141128.png" alt="JavaScript引擎的工作原理探析"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-21T00:30:12.000Z">2019-11-21</time></div><a href="/2019-11-21/769edcc6.html" class="has-link-black-ter is-size-6">JavaScript引擎的工作原理探析</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article><article class="media"><a href="/2019-11-19/290f6390.html" class="media-left"><p class="image is-64x64"><img class="thumbnail" src="https://imgs.borgor.cn/imgs/20191119100237.png" alt="深入了解JavaScript中的基本变量类型"></p></a><div class="media-content"><div class="content"><div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-11-19T04:22:33.000Z">2019-11-19</time></div><a href="/2019-11-19/290f6390.html" class="has-link-black-ter is-size-6">深入了解JavaScript中的基本变量类型</a><p class="is-size-7 is-uppercase"><a class="has-link-grey -link" href="/categories/Development/">Development</a> / <a class="has-link-grey -link" href="/categories/Development/JavaScript/">JavaScript</a></p></div></div></article></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-marginless" href="/archives/2019/11/"><span class="level-start"><span class="level-item">十一月 2019</span> </span><span class="level-end"><span class="level-item tag">7</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/10/"><span class="level-start"><span class="level-item">十月 2019</span> </span><span class="level-end"><span class="level-item tag">8</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/09/"><span class="level-start"><span class="level-item">九月 2019</span> </span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/08/"><span class="level-start"><span class="level-item">八月 2019</span> </span><span class="level-end"><span class="level-item tag">13</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/07/"><span class="level-start"><span class="level-item">七月 2019</span> </span><span class="level-end"><span class="level-item tag">15</span></span></a></li><li><a class="level is-marginless" href="/archives/2019/06/"><span class="level-start"><span class="level-item">六月 2019</span> </span><span class="level-end"><span class="level-item tag">11</span></span></a></li><li><a class="level is-marginless" href="/archives/2018/07/"><span class="level-start"><span class="level-item">七月 2018</span> </span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-marginless" href="/archives/2018/06/"><span class="level-start"><span class="level-item">六月 2018</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/12/"><span class="level-start"><span class="level-item">十二月 2017</span> </span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/11/"><span class="level-start"><span class="level-item">十一月 2017</span> </span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/10/"><span class="level-start"><span class="level-item">十月 2017</span> </span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-marginless" href="/archives/2017/09/"><span class="level-start"><span class="level-item">九月 2017</span> </span><span class="level-end"><span class="level-item tag">10</span></span></a></li></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/Agile/"><span class="tag">Agile</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Angularjs/"><span class="tag">Angularjs</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Animation/"><span class="tag">Animation</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Application/"><span class="tag">Application</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Artificial-Intelligence/"><span class="tag">Artificial Intelligence</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/BP/"><span class="tag">BP</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Bokeh/"><span class="tag">Bokeh</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Book/"><span class="tag">Book</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/C4-5/"><span class="tag">C4.5</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CART/"><span class="tag">CART</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CD/"><span class="tag">CD</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CLI/"><span class="tag">CLI</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CSS/"><span class="tag">CSS</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CentOS/"><span class="tag">CentOS</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Cinder/"><span class="tag">Cinder</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Clipboardjs/"><span class="tag">Clipboardjs</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Concept/"><span class="tag">Concept</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Continuous-Delivery/"><span class="tag">Continuous Delivery</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/DeepLearning/"><span class="tag">DeepLearning</span> <span class="tag is-grey">7</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Department/"><span class="tag">Department</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/DevOps/"><span class="tag">DevOps</span> <span class="tag is-grey">8</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Develop/"><span class="tag">Develop</span> <span class="tag is-grey">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Development/"><span class="tag">Development</span> <span class="tag is-grey">16</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Directive/"><span class="tag">Directive</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Distribution/"><span class="tag">Distribution</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Django/"><span class="tag">Django</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Document/"><span class="tag">Document</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ES5/"><span class="tag">ES5</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ES6/"><span class="tag">ES6</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Echarts/"><span class="tag">Echarts</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Engine/"><span class="tag">Engine</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Entropy/"><span class="tag">Entropy</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Filter/"><span class="tag">Filter</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Front-End/"><span class="tag">Front End</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Gallery/"><span class="tag">Gallery</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Git/"><span class="tag">Git</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Gradient-descent/"><span class="tag">Gradient descent</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Hexo/"><span class="tag">Hexo</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Horizon/"><span class="tag">Horizon</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ID3-5/"><span class="tag">ID3.5</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Icarus/"><span class="tag">Icarus</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/JavaScript/"><span class="tag">JavaScript</span> <span class="tag is-grey">9</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Javascript/"><span class="tag">Javascript</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/KVM/"><span class="tag">KVM</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/LaTeX/"><span class="tag">LaTeX</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/LibreOffice/"><span class="tag">LibreOffice</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Linux/"><span class="tag">Linux</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Machine-Learning/"><span class="tag">Machine Learning</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Matrix/"><span class="tag">Matrix</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/MiddleWare/"><span class="tag">MiddleWare</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Module/"><span class="tag">Module</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Network/"><span class="tag">Network</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Nginx/"><span class="tag">Nginx</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/NodeJS/"><span class="tag">NodeJS</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OOP/"><span class="tag">OOP</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OpenStack/"><span class="tag">OpenStack</span> <span class="tag is-grey">8</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OpenStackApi/"><span class="tag">OpenStackApi</span> <span class="tag is-grey">5</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Operations/"><span class="tag">Operations</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Oprations/"><span class="tag">Oprations</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/PDF/"><span class="tag">PDF</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Pipline/"><span class="tag">Pipline</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Probability/"><span class="tag">Probability</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Python/"><span class="tag">Python</span> <span class="tag is-grey">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React/"><span class="tag">React</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Relational-algebra/"><span class="tag">Relational algebra</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Restful/"><span class="tag">Restful</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Route/"><span class="tag">Route</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SVD/"><span class="tag">SVD</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SVM/"><span class="tag">SVM</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Scalar/"><span class="tag">Scalar</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Sigmoid/"><span class="tag">Sigmoid</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Team/"><span class="tag">Team</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tempest/"><span class="tag">Tempest</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tensor/"><span class="tag">Tensor</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Testing/"><span class="tag">Testing</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Time/"><span class="tag">Time</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/TimeMachine/"><span class="tag">TimeMachine</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tips/"><span class="tag">Tips</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vector/"><span class="tag">Vector</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vmware/"><span class="tag">Vmware</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vue/"><span class="tag">Vue</span> <span class="tag is-grey">8</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vuex/"><span class="tag">Vuex</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/WSGI/"><span class="tag">WSGI</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Web/"><span class="tag">Web</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Word-Cut/"><span class="tag">Word Cut</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/aliyun/"><span class="tag">aliyun</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/auth/"><span class="tag">auth</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/babel/"><span class="tag">babel</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/certbot/"><span class="tag">certbot</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/decision-tree/"><span class="tag">decision tree</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/homebrew/"><span class="tag">homebrew</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/jwt/"><span class="tag">jwt</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/keystone/"><span class="tag">keystone</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/loader/"><span class="tag">loader</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/mathematics/"><span class="tag">mathematics</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/migrate/"><span class="tag">migrate</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/openstack/"><span class="tag">openstack</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/pdf2html/"><span class="tag">pdf2html</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/pm2/"><span class="tag">pm2</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/singular-value-decomposition/"><span class="tag">singular value decomposition</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/vue-router/"><span class="tag">vue-router</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/vue-ssr/"><span class="tag">vue-ssr</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/webpack/"><span class="tag">webpack</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E4%BD%8E%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/"><span class="tag">低通滤波器</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A5%E9%97%A8/"><span class="tag">入门</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F/"><span class="tag">全局变量</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1/"><span class="tag">全局对象</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%A8%E6%A0%88/"><span class="tag">全栈</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%85%AC%E5%BC%8F/"><span class="tag">公式</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%86%B3%E7%AD%96%E6%A0%91/"><span class="tag">决策树</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%87%BD%E6%95%B0/"><span class="tag">函数</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%88%86%E7%B1%BB%E5%99%A8/"><span class="tag">分类器</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8A%A0%E9%80%9F/"><span class="tag">加速</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8C%B9%E9%85%8D%E6%BB%A4%E6%B3%A2%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">匹配滤波边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8D%B7%E7%A7%AF/"><span class="tag">卷积</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8D%B7%E7%A7%AF%E6%A0%B8/"><span class="tag">卷积核</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8E%9F%E5%9E%8B%E9%93%BE/"><span class="tag">原型链</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8F%8D%E5%90%91%E4%BC%A0%E6%92%AD/"><span class="tag">反向传播</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B/"><span class="tag">变量类型</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%AE%98%E6%96%B9%E7%A4%BA%E4%BE%8B/"><span class="tag">官方示例</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%AF%B9%E5%81%B6%E5%BD%A2%E5%BC%8F/"><span class="tag">对偶形式</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%AF%B9%E8%B1%A1/"><span class="tag">对象</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%B9%B3%E7%A7%BB%E5%92%8C%E6%9F%A5%E5%88%86%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">平移和查分边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8B%89%E6%A0%BC%E6%9C%97%E6%97%A5%E4%B9%98%E5%AD%90%E6%B3%95/"><span class="tag">拉格朗日乘子法</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8E%A8%E5%AF%BC/"><span class="tag">推导</span> <span class="tag is-grey">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8F%90%E4%BA%A4%E9%98%B6%E6%AE%B5/"><span class="tag">提交阶段</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%80%E5%A4%A7%E4%BC%BC%E7%84%B6%E4%BC%B0%E8%AE%A1/"><span class="tag">最大似然估计</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E4%BC%B0%E8%AE%A1/"><span class="tag">最小二乘估计</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E6%B3%95/"><span class="tag">最小二乘法</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%B4%E7%B4%A0%E8%B4%9D%E5%8F%B6%E6%96%AF/"><span class="tag">朴素贝叶斯</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/"><span class="tag">机器学习</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%9D%A1%E4%BB%B6%E6%A6%82%E7%8E%87/"><span class="tag">条件概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A2%AF%E5%BA%A6%E4%B8%8B%E9%99%8D/"><span class="tag">梯度下降</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A2%AF%E5%BA%A6%E6%96%B9%E5%90%91%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">梯度方向边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A6%82%E5%BF%B5/"><span class="tag">概念</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%A6%82%E7%8E%87/"><span class="tag">概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%B1%82%E5%AF%BC/"><span class="tag">求导</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%B5%81%E7%A8%8B/"><span class="tag">流程</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%86%B5/"><span class="tag">熵</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/"><span class="tag">生命周期</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%9F%A9%E9%98%B5/"><span class="tag">矩阵</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/"><span class="tag">神经网络</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%A7%81%E6%9C%89%E5%AF%B9%E8%B1%A1/"><span class="tag">私有对象</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%B1%BB/"><span class="tag">类</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%BA%BF%E6%80%A7%E5%9B%9E%E5%BD%92/"><span class="tag">线性回归</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%81%94%E5%90%88%E6%A6%82%E7%8E%87/"><span class="tag">联合概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%B4%9D%E5%8F%B6%E6%96%AF%E5%88%A4%E5%AE%9A%E5%87%86%E5%88%99/"><span class="tag">贝叶斯判定准则</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%BE%B9%E7%BC%98%E6%A3%80%E6%B5%8B/"><span class="tag">边缘检测</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%BE%B9%E9%99%85%E6%A6%82%E7%8E%87/"><span class="tag">边际概率</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%97%AD%E5%8C%85/"><span class="tag">闭包</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%97%B4%E9%9A%94/"><span class="tag">间隔</span> <span class="tag is-grey">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%AB%98%E6%96%AF%E5%88%86%E5%B8%83/"><span class="tag">高斯分布</span> <span class="tag is-grey">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%AB%98%E9%80%9A%E6%BB%A4%E6%B3%A2%E5%99%A8/"><span class="tag">高通滤波器</span> <span class="tag is-grey">1</span></a></div></div></div></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start has-text-centered-mobile"><a class="footer-logo is-block has-mb-6" href="/"><img src="https://imgs.borgor.cn/imgs20190625111723.jpg" alt="Vue-Router简明教程(基础)" height="28"></a><p class="is-size-7">&copy; 2017-2019 Cyrusky&nbsp; Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a><br><span id="busuanzi_container_site_uv">共<span id="busuanzi_value_site_uv">0</span>个访客</span><br><a target="_blank" href="https://icp.chinaz.com/info?q=borgor.cn">陇ICP备19002255号</a></p></div><div class="level-end"><div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle"><p class="control"><a class="button is-white is-large" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a></p><p class="control"><a class="button is-white is-large" target="_blank" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/"><i class="fab fa-creative-commons-by"></i></a></p><p class="control"><a class="button is-white is-large" target="_blank" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a></p></div></div></div></div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script><script>moment.locale("zh-CN")</script><script src="/js/animation.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.8/js/lightgallery.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js" defer></script><script src="/js/gallery.js" defer></script><div id="outdated"><h6>Your browser is out-of-date!</h6><p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/" target="_blank" rel="noopener">Update my browser now</a></p><p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p></div><script src="https://cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.js" defer></script><script>document.addEventListener("DOMContentLoaded",function(){outdatedBrowser({bgColor:"#f25648",color:"#ffffff",lowerThan:"flex"})})</script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" defer></script><script>document.addEventListener("DOMContentLoaded",function(){MathJax.Hub.Config({"HTML-CSS":{matchFontHeight:!1},SVG:{matchFontHeight:!1},CommonHTML:{matchFontHeight:!1},tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]]}})})</script><a id="back-to-top" title="回到顶端" href="javascript:;" target="_blank" rel="noopener"><i class="fas fa-chevron-up"></i></a><script src="/js/back-to-top.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" defer></script><script src="/js/clipboard.js" defer></script><script src="/js/main.js" defer></script><div class="searchbox ins-search"><div class="searchbox-container ins-search-container"><div class="searchbox-input-wrapper"><input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..."> <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span></div><div class="searchbox-result-wrapper ins-section-wrapper"><div class="ins-section-container"></div></div></div></div><script>!function(T){var N={TRANSLATION:{POSTS:"文章",PAGES:"页面",CATEGORIES:"分类",TAGS:"标签",UNTITLED:"(无标题)"},CONTENT_URL:"/content.json"};T.INSIGHT_CONFIG=N}(window)</script><script src="/js/insight.js" defer></script><link rel="stylesheet" href="/css/search.css"><link rel="stylesheet" href="/css/insight.css"></body></html><!-- rebuild by neat -->